/**
 * Created by Freeman on 2016/8/4.
 */
import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {Field, reduxForm} from 'redux-form'
import classnames from 'classnames'
import * as Actions from '../../actions'
import SNSLogin from './SNSLogin'
const validate = values => {
    const errors = {}
    if (!values.email) {
        errors.email = 'Required'
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
        errors.email = 'Invalid email address'
    }
    if (!values.password) {
        errors.password = 'Required'
    } else if (values.password.length < 6) {
        errors.password = 'Must be 6 characters or more'
    }
    return errors
};
const renderField = ({input, type, labelClass,meta: {touched, error}}) => (
    <div className={classnames({'input-group': true, 'has-error': touched && error})}>
        <div className="input-group-addon">
            <i className={labelClass}></i>
        </div>
        <input className="form-control" {...input} type={type}/>
        {touched && error && <span className="help-block">{error}</span>}
    </div>
);

class Login extends Component {

    constructor(props) {
        super(props);
        this.submitForm = this.submitForm.bind(this);
    }

    submitForm(values) {
        this.props.actions.localLogin(values)
    }

    render() {
        const {handleSubmit, pristine, reset, submitting} = this.props;
        const logins = ['github'];
        return (
            <div className="signin-box">
                <div className="signin-container">
                    <h4 className="title">登 录</h4>
                    <div id="signinForm">
                        <form className="signin-form form-horizontal" onSubmit={handleSubmit(this.submitForm)}>
                            <div className="form-group">
                                <Field name="email" component={renderField} labelClass="fa fa-envelope-o"  type="email" placeholder="邮箱"/>
                            </div>
                            <div className="form-group">
                                <Field name="password" component={renderField} labelClass="fa fa-unlock-alt" type="password" placeholder="密码"/>
                            </div>
                            <div className="form-group">
                                <button className="btn btn-primary btn-lg btn-block" type="submit" id="signin_btn"
                                        disabled={submitting}>登 录
                                </button>
                                <button className="btn btn-success btn-lg btn-block" type="button"
                                        disabled={pristine || submitting} onClick={reset}>Clear
                                </button>
                            </div>
                        </form>
                    </div>
                    <SNSLogin logins={logins}/>
                </div>
            </div>
        )
    }


}


Login.propTypes = {
    actions: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func,
};

const mapStateToProps = (state) => {
    return {
        msg: state.msg
    }
};

const mapDispatchToProps = dispatch => {
    return {
        actions: bindActionCreators(Actions, dispatch)
    }
};

Login = reduxForm({
    form: 'signin',
    validate
})(Login);
Login = connect(
    mapStateToProps,
    mapDispatchToProps
)(Login);
export default Login